var myec;
initDrawStdBar = function () {
    // 配置
    require.config({
        paths: {
            echarts: 'js/echarts' // echarts路径
        }
    });
    require(
        // 按需加载
        ['echarts', 'echarts/chart/bar', 'echarts/chart/line',
            'echarts/chart/pie'],

        function (ec) {
            myec = ec;
        });
}

DrawStdLine = function (datas, divID, legend, title, subtitle) {
    setTimeout(100);
    var myChart = myec.init(document.getElementById(divID));
    var xdata = ['1月份', '2月份', '3月份', '4月份', '5月份', '6月份', '7月份', '8月份',
        '9月份', '10月份', '11月份', '12月份'];
    var topData = [];// 上行数据
    var bottomData = [];// 下行数据
    for (var i in datas[0]) {
        topData.push(datas[0][i]);
    }
    for (var i in datas[1]) {
        bottomData.push(datas[1][i]);
    }
    option = {
        title: {
            text: title,
            x: 'center',
            subtext: subtitle
        },
        color: ['red', 'blue'],
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            y: 'bottom',
            show: true,
            orient: 'horizontal',
            borderColor: '#df3434',
            borderWidth: 0,
            itemGap: 80,//图例之间的间距
            data: [
                {
                    name: '上行（万元）',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bolder',
                        color: 'red'
                    },
                    icon: 'image://../images/red.png'
                },
                {
                    name: '下行（万元）',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bolder',
                        color: 'blue'
                    },
                    icon: 'image://../images/blue.png'
                }
            ]


        },
        toolbox: {
            show: true,
            feature: {
                mark: {
                    show: false
                },
                // dataView : {show: true, readOnly: false},
                // magicType : {show: true, type: ['line', 'bar']},
                // restore : {show: true},
                saveAsImage: {
                    show: false
                }
            }
        },
        calculable: true,
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: xdata
        }],
        yAxis: [{
            type: 'value',
            axisLabel: {}
        }],
        series: [{
            name: '上行（万元）',
            type: 'line',
            itemStyle: {
                normal: {
                    color: 'red'
                }
            },
            data: topData
        }, {
            name: '下行（万元）',
            type: 'line',
            itemStyle: {
                normal: {
                    color: 'blue'
                }
            },
            data: bottomData
        }]
    };
    // 为echarts对象加载数据
    myChart.setOption(option);
}

DrawStdPie = function (datas, divID, legend, title, subtitle, colorindex) {
    setTimeout(100);
    var myChart = myec.init(document.getElementById(divID));
    var colorlist = [
        ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463',
            '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B',
            '#C6E579', '#F4E001', '#F0805A', '#26C0C0', '#5B5B5B',
            '#00CD66', '#D15FEE', '#CD5B45', '#FFB90F'],
        ['#FF69B4', '#EEDD82', '#FFA07A', '#87CEFA', '#CDC0B0', '#66CDAA',
            '#C1CDCD', '#8B7D6B', '#8A2BE2', '#0000CD', '#458B00',
            '#FFF8DC', '#00FFFF', '#FFB90F', '#BF3EFF', '#8FBC8F',
            '#FF1493', '#9400D3', '#1E90FF', '#FFD700']];
    option = {
        title: {
            text: title,
            subtext: subtitle,
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter : "{a} <br/>{b} : {c} ({d}%)"
        },

        legend: {
            orient: 'vertical',
            x: 'left',
            data: []
        },
        toolbox: {
            show: true,
            feature: {
                mark: {
                    show: false
                },
                // dataView : {show: true, readOnly: false},
                // magicType : {
                // show: true,
                // type: ['pie', 'funnel'],
                // option: {
                // funnel: {
                // x: '25%',
                // width: '50%',
                // funnelAlign: 'left',
                // max: 1548
                // }
                // }
                // },
                // restore : {show: true},
                saveAsImage: {
                    show: false
                }
            }
        },
        color: colorlist[colorindex],
        calculable: true,
        series: [{
            name: '服务站点',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            itemStyle: {
                normal: {
                    label: {
                        textStyle: {
                            fontWeight: '900'
                        },
                        formatter: function (obj) {
                            return obj.name + '\n' + obj.percent + '%'
                        }
                        //  formatter : "{b} : {c}\n ({d}%)"
                    }
                }
            },
            data: datas
        }]
    };
    // 为echarts对象加载数据
    myChart.setOption(option);
}

DrawStdBar = function (datas, divID, legend, title, subtitle, coloindex) {
    setTimeout(100);
    var myChart = myec.init(document.getElementById(divID));
    // 分离出：Xdata值为x轴数据,Ydata值为y轴数据
    var xdata = [];
    var ydata = [];
    for (var i = 0; i < datas.length; i++) {
        xdata.push(datas[i].Xdata);
        ydata.push(datas[i].Ydata);
    }
    // 定义图表option
    var option = {
        // 标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题
        title: {
            text: title,// 主标题文本
            subtext: subtitle,
            x: 'center'
            // 副标题文本
        },
        grid: {
            y2: 100
        },
        tooltip: {
            trigger: 'axis'// tooltip触发方式:axis以X轴线触发,item以每一个数据项触发
        },
        legend: {// 图例，每个图表最多仅有一个图例
            orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
            // 'horizontal' ¦ 'vertical'
            x: 'left', // 水平安放位置，默认为全图居中，可选为：
            // 'center' ¦ 'left' ¦ 'right'
            // ¦ {number}（x坐标，单位px）
            y: 'top',
            data: legend,
            padding: 30
        },
        toolbox: {// 工具箱，每个图表最多仅有一个工具箱
            show: true,// 是否显示工具栏
            orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
            // 'horizontal' ¦ 'vertical'
            x: 'right', // 水平安放位置，默认为全图右对齐，可选为：
            // 'center' ¦ 'left' ¦ 'right'
            // ¦ {number}（x坐标，单位px）
            y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
            // 'top' ¦ 'bottom' ¦ 'center'
            // ¦ {number}（y坐标，单位px）
            borderWidth: 0, // 工具箱边框线宽，单位px，默认为0（无边框）
            padding: 30,
            feature: {
                // 辅助线标志
                mark: {
                    show: false
                },
                // dataZoom，框选区域缩放，自动与存在的dataZoom控件同步，分别是启用，缩放后退
                // dataZoom: {
                // show: true,
                // title: {
                // dataZoom: '区域缩放',
                // dataZoomReset: '区域缩放后退'
                // }
                // },
                // dataView: { show: true, readOnly: false },//数据预览
                // restore: { show: true },//复原
                // 是否启用拖拽重计算特性，默认关闭(即值为false)
                calculable: true,
                saveAsImage: {
                    show: false
                }
                // 是否保存图片
            }
        },
        // 直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数值
        // 横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型
        xAxis: [// X轴均为category，Y轴均为value
            {
                // 显示策略，可选为：true（显示） | false（隐藏），默认值为true
                show: true,
                // 坐标轴类型，横轴默认为类目型'category'
                type: 'category',
                // 类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行
                data: xdata,
                textStyle: {
                    fontSize: '7px'
                },
                // boundaryGap: false,//数值轴两端的空白策略
                axisLabel: {// X轴刻度配置
                    show: true,
                    formatter: function (params) {
//					var newParamsName = "";// 最终拼接成的字符串
//					var paramsNameNumber = params.length;// 实际标签的个数
//					var provideNumber = 1;// 每行能显示的字的个数
//					var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
//					/**
//					 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
//					 */
//					// 条件等同于rowNumber>1
//					if (paramsNameNumber > provideNumber) {
//						/** 循环每一行,p表示行 */
//						for (var p = 0; p < rowNumber; p++) {
//							var tempStr = "";// 表示每一次截取的字符串
//							var start = p * provideNumber;// 开始截取的位置
//							var end = start + provideNumber;// 结束截取的位置
//							// 此处特殊处理最后一行的索引值
//							if (p == rowNumber - 1) {
//								// 最后一次不换行
//								tempStr = params.substring(start,
//										paramsNameNumber);
//							} else {
//								// 每一次拼接字符串并换行
//								tempStr = params.substring(start, end) + "\n";
//							}
//							newParamsName += tempStr;// 最终拼成的字符串
//						}
//
//					} else {
//						// 将旧标签的值赋给新标签
//						newParamsName = params;
//					}
//					// 将最终的字符串返回
//					return newParamsName;
                        return params.split("").join("\n");
                    },
                    height: 100,
                    interval: 0,// 0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
                    rotate: 0,// 标签旋转角度，默认为0，不旋转，正直为逆时针，负值为顺时针，可选为：-90 ~ 90
                    margin: 8
                    // 坐标轴文本标签与坐标轴的间距，默认为8，单位px
                }
            }],
        // 直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值
        // 纵轴通常为数值型，但条形图时则纵轴为类目型
        yAxis: [{
            // 显示策略，可选为：true（显示） | false（隐藏），默认值为true
            show: true,
            // 坐标轴类型，纵轴默认为数值型'value'
            type: 'value',
            // 分隔区域，默认不显示
            splitArea: {
                show: true
            }
        }],
        // sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构；对象内包含对象
        series: [{
            // 系列名称，如果启用legend，该值将被legend.data索引相关
            name: legend[0],
            // 图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。
            type: 'bar',
            // 系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值
            data: ydata,
            itemStyle: {
                normal: {
                    color: function (params) {
                        // build a color map as your need.
                        var colorList = [
                            // '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                            // '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                            // '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                            '#FF9224', '#0080FF'];
                        return colorList[coloindex]
                    }
                }
            },
            barWidth: 20
        }]
    };
    // 为echarts对象加载数据
    myChart.setOption(option);
}
